const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//打包之前 应用
const {CleanWebpackPlugin} = require('clean-webpack-plugin');//打包之后 应用 新写法

module.exports = {
    mode: 'development', // 开发模式
    /*
    * mode: 'development' devtool:'cheap-module-eval-source-map'
    * mode: 'production' devtool:'cheap-module-source-map'
    * */
    // 定位源代码的出错位置或者警告的位置
    devtool: 'cheap-module-eval-source-map',
    // 项目的入口文件
    entry: {
        main: './src/index.js'
    },
    devServer: {
        contentBase: './dist',
        open: true, // 是否自动打开浏览器
        port: 3000,
        proxy: {
            'api': 'http://localhost:3000'
        }
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./index.html"
        })
    ],
    output: {
        filename: '[name].js',// 打包后的js文件名
        // 打包后的文件放在哪个文件夹下(dist)
        // __dirname:webpack.config所在的目录，dist和webpack.config在同一目录，用于存放打包文件
        path: path.resolve(__dirname, 'dist')
    }
};
